Detalhes Dealers 1
Detalhes do veículo novo da plataforma do Dealers 1
HTML
<amp-list height="550" src="/api/vehicle/dealers/QUERY_PARAM(id)" single-item > <template type="amp-mustache"> {{^ result}} <div class="row"> <div class="col-lg-12"> <span class="alert alert-info center-block"> Nenhum registro encontrado! </span> </div> </div> {{/result}} {{#result}} <div class=" col-lg-12"> <h1>{{name}}</h1> <hr /> </div> <div class="col-lg-8"> <amp-img src="https://img1.static.reweb.io/i/800/500/{{ secureImageURL}}{{image.image}}" width="800" height="500" class="img-responsive" layout="responsive" > </amp-img> </div> <div class="col-lg-4"> <form method="post" class="row vehicle-detail-form" action-xhr="https://api.amp.reweb.io/api/lead/register" target="_top"> <input type="hidden" name="meio_captacao" value="SITE_LP_AMP_COTACAO_NOVOS" /> <input type="hidden" name="utm_source" value="QUERY_PARAM(utm_source)" data-amp-replace="QUERY_PARAM"> <input type="hidden" name="midia" value="QUERY_PARAM(m)" data-amp-replace="QUERY_PARAM"> <input type="hidden" name="referencia_externa" value="EXTERNAL_REFERRER" data-amp-replace="EXTERNAL_REFERRER"> <input type="hidden" name="referencia_documento" value="DOCUMENT_REFERRER" data-amp-replace="DOCUMENT_REFERRER"> <div class="col-lg-12"> <h3>Cotação:</h3> <hr /> <div submitting> <template type="amp-mustache"> <span class="col-lg-12 alert alert-info"> Enviando formulário... </span> </template> </div> <div submit-success> <template type="amp-mustache"> <span class="col-lg-12 alert alert-success"> {{ message}} </span> </template> </div> <div submit-error> <template type="amp-mustache"> <span class="col-lg-12 alert alert-danger"> {{ message}} </span> </template> </div> <div class="form-group"> <label for="nome">Nome</label> <input type="text" class="form-control" name="nome" id="nome"> </div> <div class="form-group"> <label for="email">Email</label> <input type="text" class="form-control" name="email" id="email"> </div> <div class="form-group"> <label for="telefone">Telefone</label> <input type="text" class="form-control" name="telefone" id="telefone"> </div> <div class="form-group"> <label for="modelo">Modelo</label> <input type="text" class="form-control" name="modelo" id="modelo" value="{{name}}" readonly> </div> <button type="submit" class="btn btn-primary">Enviar</button> </div> </form> </div> <div class="col-lg-12"> <h3>Descrição</h3> <hr /> <p>{{description}}</p> <h3>Galeria</h3> <hr /> {{#images}} <amp-img src="https://img1.static.reweb.io/i/800/500/{{secureImageURL}}{{image}}" width="800" height="500" style="cursor: pointer;" lightbox></amp-img> {{/images}} </div> {{/result}} </template> </amp-list>
COMPONENTS
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script> <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script> <script async custom-element="amp-lightbox" src="https://cdn.ampproject.org/v0/amp-lightbox-0.1.js"></script> <script async custom-element="amp-lightbox-gallery" src="https://cdn.ampproject.org/v0/amp-lightbox-gallery-0.1.js"></script> <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
STYLES
<style amp-custom> .lightbox { background: rgba(0,0,0,0.8); width: 100%; height: 100%; position: absolute; display: flex; z-index:99999999999; overflow: auto; } .lightbox .btn-close { border-radius: 6px 6px 0 0; } .lightbox h1 { margin:0; } .lightbox .content { width:100%; background: #fff; padding: 50px; border-radius: 10px 0 10px 10px; margin-bottom: 50px; } .price { display: block; padding: 15px; background-color: #000; color: #fff; font-weight: bold; margin-bottom: 15px; } .vehicle-detail-form { background-color: #f4f4f4; padding-right: 15px; padding-bottom: 15px; } .vehicle-detail-form h3 { text-transform: uppercase; text-align: center; font-weight: bold; } </style>
LIVE DEMO
Nenhum registro encontrado!
{{name}}
Descrição
{{description}}
Galeria
{{#images}}